<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, viewport-fit=cover">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
		<title>步数</title>
		<link href="../lib/mint-ui@2.2.13.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">
		<link href="../css/step.css" rel="stylesheet">
		<script src="../lib/vue.js"></script>
	</head>
	<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" οncοpy="return false">
		<div id="step" class="step" style="display: none;" :style="{display: 'block'}">
			<div class="header">
				<a class="back" href="javascript:history.go(-1)"></a>
				<div class="title">步数</div>
			</div>
			<div class="date-tab">
				<div
					@click="timeType = i"
					v-for="(item,i) in timeTab" 
					:key="item" 
					class="date-item" 
					:class="{'active': timeType === i}">{{item}}</div>
			</div>
			<div class="date-info">
				<div class="show-date" v-show="timeType === 0">
					<div id="step-date"></div>
				</div>
				<div class="show-date" v-show="timeType === 1">
					<div id="step-week"></div>
				</div>
				<div class="show-date" v-show="timeType === 2">
					<div id="step-month"></div>
				</div>
				<div class="show-date" v-show="timeType === 3">
					<div id="step-year"></div>
				</div>
			</div>
			<div class="chart-box">
				<div class="no-data" v-if="step === 0">
					<img src="../img/info/pic_no_record.png">
					<div class="text">暂无步数记录</div>
				</div>
				<div class="chart-in" v-else>
					<div class="name">步数</div>
					<div class="step-num">{{step}}<span>步</span></div>
					<canvas id="mainChart" width="350" height="280"></canvas>
				</div>
			</div>
			<div class="setting" v-show="step != 0">
				<div class="set-title">
					<div class="left">
						<img src="../img/info/ic_my_target@2x.png" v-if="timeType === 0">
						<img src="../img/info/ic_my_avg@2x.png" v-else>
						<div class="text">{{ timeType | filterTitle}}</div>
					</div>
					<img src="../img/home/ic_list_enter.png" class="arrow" v-if="timeType === 0">
				</div>
				<div class="day" v-show="timeType === 0">
					<div class="target">
						<div class="name" :style="{'color': themeColor}">步数目标</div>
						<div class="step-num">{{targetStep}}<span>步</span></div>
						<div class="set-btn" @click="popupVisible = true">
							<img class="type-img" src="../img/info/ic_my_step@2x.png">
							<span>目标设置</span>
							<img class="arrow" src="../img/info/ic_list_enter.png">
						</div>
					</div>
					<canvas id="dayChart" width="130" height="130"></canvas>
				</div>
				<div class="only-data" v-show="timeType !== 0">
					<div class="number">{{step}}<span>步</span></div>
				</div>
			</div>
			<div class="myPicker">
				<mt-popup v-model="popupVisible" position="bottom">
					<div class="title">步数目标（步）</div>
					<mt-picker :slots="slots" @change="onValuesChange" :item-height="60" :visible-item-count="3"></mt-picker>
					<div class="picker-btn">
						<div class="cancel" @click="popupVisible = false">取消</div>
						<div class="confirm" @click="confirm">保存</div>
					</div>
				</mt-popup>
			</div>
		</div>
		<div id="dateMask"></div>
		<script src="../lib/mint-ui@2.2.13.js"></script>
		<script src="../lib/xndatepicker.min.js"></script>
		<script src="../lib/dayjs.min.js"></script>
		<script src="../lib/jquery-3.2.1.min.js"></script>
		<script src="../lib/f2.min.js"></script>
		<script src="../js/shape.js"></script>
		<script src="../js/step.js"></script>
	</body>
</html>